<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{margin: 0px;
              padding: 0px;
              list-style: none;
            }    
            .header{position: relative;
                    right: 0px;
                    top: 0px;
                    height: 38px;  
            }
            .nav{height: 600px;
                 width: 642px;
                 margin: 30px auto 23px auto;
            }
            .con{width: 630px;
                 height: 100px;
                 margin: 20px auto;
            }
            .header ul{float: right;
                       margin-right: 100px;
                       position: absolute;
                       top: 0px;
                       right: 0px;
            }
            .header li{float: left;
                       margin: 12px 20px 0px 0px;
            }
            .header li a{color: #4c505f;
                         font-size: 15px;
            }
            .header span{width: 62px;
                         height: 24px;
                         background: #3388ff;
                         float: right;    
                         margin-top: 10px;  
                         position: absolute;
                         top: 0px;
                         right: -50px;
            }
            .header span a{line-height: 24px;
                           color: white;
                           font-size: 10px;
                           text-decoration: none;
                           margin-top: 15px; 
                           padding-left: 7px;
            }
            .nav li{margin: 0px  0px 0px 55px;
            }
            .nav  li  img{margin: 0px  auto 0px auto;
            }
            input{border: 1px solid #c4c7ce;
                  width: 540px;
                  height: 37px;
                  margin-top: 25px;       
                  background: url(images/camera_new_5606e8f.png) no-repeat right ;     
            }           
            .nav p{background:#3388ff ;
                   width: 80px;
                   height: 40px;
                   line-height: 40px;
                   padding-left: 15px;
                   margin-left: 542px;
                   margin-top: -40px;
            }  
            .nav p a{text-decoration: none;
                     color: white;
            }
            .foot{text-align: center; 
                  margin-left: 50px; 
                  margin-top: -30px ;          
            }
            .foot img{margin: 205px 100px 0px 50px;   
            }
            .foot p{background: white;
                   color: #4c4c4c;
                   font-size: 14px;
                   margin-top: -15px;
                   margin-left:215px;
            }
            .con li{font-size: 14px;
                    float: left;
                    margin-right: 62px; 
                    margin-bottom: 14px;    
                    margin-left: 0px;
            }
            .con ul{float: right;
            }
            .con a{color:#9e9e9e ;
            }
            .bottom ul{margin-top: -5px;
            }
            .bottom li{float: left;
                       margin-left: 0px;
                       margin-right: 10px;
            }
            .bottom p{background: white;
                     font-size: 14px;
            }
            .bottom span{margin-left: -9px;
                         margin-right: 10px;
                         color: #9e9e9e;
            }
            </style>
    </head>
    <body>
        <div class="header">
            <ul>
                <li><a href="">糯米</a></li>
                <li><a href="">新闻</a></li>
                <li><a href="">hao123</a></li>
                <li><a href="">地图</a></li>
                <li><a href="">视频</a></li>
                <li><a href="">贴吧</a></li>
                <li><a href="">登录</a></li>
                <li><a href="">设置</a></li>
                <span><a href="">更多产品</a></span>
            </ul>
        </div>
        <div class="nav">
            <ul>
                <li><img src="images/bd_logo1.png" alt=""></li>       
            </ul>
        <input type="text"> 
            <p><a href="">百度一下</a></p>
        <div class="foot">
            <img src="images/zbios_efde696.png" alt="">
            <p>手机百度</p>
        </div>     
        <div class="con">
        <ul> 
            <li>
                <a href="">把百度设为主页</a>
            </li>
            <li>
            <a href="">关于百度</a>
            </li>
            <li>
                <a href="">About   Baidu</a></li>
            <li>
                <a href="">百度推广</a>
            </li>
        </ul>
        <div class="bottom">
            <ul>
                <li>
                    <span>©2016 百度</span>
                </li>
                <li>
                    <a href="">使用百度前必读</a>
                </li>
                <li>
                    <a href="">意见反馈</a>
                </li>
                <li>
                    <span>京ICP证030173号</span>   
                    <b><img src="images/d1.jpg" alt="" width="10px" height="15px"></b>
                </li>
                <li>
                    <a href="">京公安备网11000002000001号</a> 
                    <b><img src="images/d2.jpg" alt="" width="10px" height="14px"></b>
                </li>           
            </ul>
        </div>
        </div>
    </body>
</html>